<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>投票项目</title>
    <!-- 导入jquery -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
    <script src="/views/message.js"></script>
    <link rel="stylesheet" href="/views/base.css">
</head>
<style>
    *{
        margin: 0;
        padding:0;
    }
    /* 蒙版 */
    .Mask{
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgb(145, 145, 145);
        z-index: 100;
        opacity: 0.4;
        display: none;
    }
    /* 顶部 */
    .centen{
        border-radius: 10px;
        width: 100%;
        height: 1000px;
        margin: 0 auto;
    }
    .top{
        line-height: 50px;
        width: 100%;
        /* height: auto; */
        background:url('https://7bu.top/2020/09/09/19689411a346a.png')no-repeat ;
        background-size: 100% 100%;
        color: #fff;
        background-position-x: center;
        position: relative;
    }
    .top::after{
      content: "";
      display: block;
      padding-bottom: 50%;

    }
    .top .logo{
        float: left;
        margin-left: 40px ;
    }
    .top .login{
        float: right;
    }
    .top .login ul {
        display: inline;   
    }
    .top .login ul li{
        float: left;  
        margin-right:20px ;
        list-style: none;
    }
    /* 我要报名 */
    .myOK{
        width: 88%;
        height: 50px;
        background:rgb(255, 255, 255);
        /* text-align:center ; */
        color: #333;
        display: block;
        margin: 0 auto;
        position: absolute;
        bottom:0px;
        left: 5.5%;
    }
    .myOK span{
        margin-left:10px ;
        color: #504f4f;
    }
    .myOK .clickok{
        width: 98px;
        height: 25px;
        /* background: chartreuse; */
        border:1px solid #4aa4ec ;
        border-radius: 5px;
        float: right;
        margin-top:12px ;
        margin-right:10px ;
        line-height: 25px;
        text-align:center ;
        color: #278cdf;
    }
    .buttonList{
        margin-top: 20px;
        width: 100%;
        display: flex; 
        text-align: center;
    }
    .buttonList div{
        flex:1;   
        height: 40px;
        float: left;
        /* border: 1px solid #333333; */
        line-height: 40px;

    }
    .buttonList div span{
        display: inline-block;
        width: 88%;
        height: 40px;
        color: #479ce2;
        font-weight: 700;
        font-size: 18px;
        text-shadow:2px 2px 2px #90c4e7;
        /* background-image: linear-gradient(to top, #48c6ef 0%, #6f86d6 100%); */
        /* -moz-box-shadow:5px 2px 10px #8ec5fc; 
        -webkit-box-shadow:5px 2px 10px #8ec5fc; 
        box-shadow:5px 3px 10px #8ec5fc;
        border-radius: 6px; */
    }
    .buttonList div span:hover{
        background-image: linear-gradient(to top, #48c6ef 0%, #6f86d6 100%);
        color: #fff;
        -moz-box-shadow:5px 2px 10px #8ec5fc; 
        -webkit-box-shadow:5px 2px 10px #8ec5fc; 
        box-shadow:5px 3px 10px #8ec5fc;
        border-radius: 6px;
        cursor:pointer;
    }


    /* 瀑布流 */
    .imgList{
        width: 100%;
        /* background:chartreuse; */
        display: flex;
        flex-wrap: wrap;  
        /* margin: 0 auto;  */
        /* text-align: center; */
        padding-top: 20px;
    }
    .onediv{
        width: 160px;
        height: 220px;
        /* background:red; */
        margin:0 auto;
        border-radius: 5px;
        -moz-box-shadow:2px 2px 5px #B8B8B8; -webkit-box-shadow:2px 2px 5px #B8B8B8; box-shadow:2px 2px 5px #B8B8B8;
    }
    .imagetop{
        width: 100%;
        height: 160px;
        -webkit-border-top-left-radius: 5px;
        -webkit-border-top-right-radius: 5px;
        -moz-border-radius-topleft: 5px;
        -moz-border-radius-topright: 5px;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
    }
    .usernum{
        width: 30px;
        height: 30px;
        background-image: linear-gradient(120deg, #89f7fe 0%, #66a6ff 100%);
        -moz-border-radius: 50px;
        -webkit-border-radius: 50px;
        border-radius: 50px;
        position: relative;
        top: 5px;
        left: 5px;
        text-align: center;
        line-height: 30px;
        color: #fff;

    }
    .username{
        width: 100%;
        height: 25px;
        text-align: center;
        line-height: 25px;
        /* background:teal; */
    }
    .vote{
        width: 60%;
        height: 30px;
        margin:0 auto;
        text-align: center;
        line-height: 30px;
        border-radius: 30px;
        font-size: 15px;
        background-image: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
        color:#fff;
    }
    /* 分页 */
    .paging{
        width: 100%;
        height: 40px;
        /* background:red; */
        padding-top:20px;
    }
    .previous{
        float: left;
        margin-left:20px ;
    }
    .next{
        float: right;
        margin-right:20px ;
    }

    .fillet50{
        width: 70px;
        height: 40px;
        background-image: linear-gradient(120deg, #89f7fe 0%, #66a6ff 100%);
        border-radius: 50px;
        text-align: center;
        font-weight: 600;
        line-height: 40px;
        color: rgb(255, 255, 255);
    }

    /* 公告 */
    .Notice{
        width: 80%;
        padding-bottom:20px;
        /* background:red; */
        margin: 0 auto;
        padding:20px ;
        margin-top: 20px;
        border:1px solid #7893aa;
        color: rgb(100, 99, 99);
    }
    .Notice span p{
        font-weight: 900;
        font-size: 18px;
    }
    /* 登陆注册 */
    .land{
        z-index: 110;
        width: 360px;
        height: 500px;
        background: #fff;
        position: fixed;
        top: 20%;
        /* 偏移一半 */
        left: 50%;
        /* 然后我在减少回来一半就对了 */
        margin-left: -180px;
        text-align: center;
        border-radius: 10px;
        -moz-box-shadow:2px 2px 5px #D9D9D9; -webkit-box-shadow:2px 2px 5px #D9D9D9; box-shadow:2px 2px 5px #D9D9D9;
        display: none;
    }
    .inputOne{
        padding-top:30px ;
    }
    .land input{
        width: 80%;
        height: 50px;
        background: red;
        margin: 0 auto ;
        margin-top: 20px;
        background:none;  
        outline:none;  
        border:0px;
        border-bottom:1px solid #ccc;
    }
    .land span{
        display: inline-block;
        width: 100%;
        height: 40px;
        padding-top: 50px;
        font-size: 22px;
        font-weight: 500;
    }
    .obtain_code{
        width: 80px;
        height: 35px;
        /* border: 1px solid red; */
        font-size: 15px;
        line-height: 35px;
        position: absolute;
        top: 145px;
        left: 67%;
        text-align: center;
        background: #666666;
        color: #fff;
        border-radius: 6px;

    }
    .onlogin{
        width: 80%;
        height: 40px;
        background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
        margin: 0 auto;
        margin-top: 30px;
        line-height: 40px;
        border-radius: 10px;
        color: rgb(255, 255, 255);
    }
    .xian{
        width: 90%;
        height: 10px;
        border-bottom: solid 1px #ccc;
        margin: 0 auto;
        margin-top: 30px;
    }
    .land p{
        width: 90%;
        font-size: 12px;
        color: rgb(151, 150, 150);
        text-align:left;
        margin: 0 auto;
        margin-top:20px ;
    }
    .onle{
        width: 20px;
        height: 20px;
        border: 1px solid #333;
        border-radius: 50%;
        text-align: center;
        line-height: 20px;
        position: absolute;
        left: 90%;
        top: 15px;
        cursor: pointer;
    }
    .ul2{
        display: none;
    }
    .log11{
        padding-right: 10px;
    }
</style>
<body>
    <div class="Mask"></div>
    <!-- 这里程序的主体 -->
    <div class="centen">
        <!-- 顶部 -->
        <div class="top">
            <!-- logo -->
            <div class="logo">login</div>
            <!-- 登陆注册 -->
            <div class="login">
                <ul class="ul1">
                    <li>登陆</li>
                    <li>注册</li>
                </ul>
            </div>
            <div class="login log11" style="display: none;">
                <ul>
                    <li></li>
                </ul>
            </div>
             <!-- 我要报名 -->
            <div class="myOK">
                <span>你是最美的孩子 </span>
                <div class="clickok">
                    我要报名 
                </div>
            </div>
        </div>
        <!-- 功能按键 -->
        <div class="buttonList">
            <div>
                <span>投票排行</span> 
            </div>
            <div>
                <span>最新选手</span> 
            </div>
            <div>
                <span>编号排序</span>
            </div>
            <div>
                <span>我以投票</span>
            </div>
        </div>
        <!-- 选手列表 -->
        <div class="imgList">
            <!-- 单个显示 -->
            <div class="onediv">
                <div class="imagetop" style="background:url('https://7bu.top/2020/09/05/be2da41f5b3ec.png') no-repeat;background-size: 100% 100%;">
                    <div class="usernum">
                        <span>12</span> 
                    </div>
                </div>
                <div class="username">姓名</div>
                <div class="vote">立即投票</div>
            </div>
            <!--  -->
            <div class="onediv">

            </div>
        </div>
        <!-- 分页 -->
        <div class="paging">
            <!-- 上一页 -->
            <div class="previous fillet50">上一页</div>
            <!-- 下一页 -->
            <div class="next fillet50">下一页</div>
        </div>

        <!-- 公共和说明 -->
        <div class="Notice">
            <span> <p>规则说明：</p> 
                1. 本活动纯属娱乐，请勿当真。<br>
                2. 你不能多次注册哈！<br>
                3. 好吧你最美的你是。<br>
                4. 好吧你最美的你是。<br>
                5. 好吧你最美的你是。<br>
            </span>
        </div>
         <!-- 登陆按钮 -->
        <div class="land">
            <div class="onle">X</div>
            <!-- 名称 -->
            <!-- <input name="uname" class="inputOne" type="text" placeholder="名称："> -->
            <span>注册/登陆</span>
            <input type="text" name="msg_id" value="3242452244" style="display:none;">
            <!-- 手机号 -->
            <input name="phone" class="inputOne"  type="text" maxlength="11" placeholder="手机号：">
            <!-- 获取验证码 -->
            <div class="obtain_code">获取验证码</div>
            <!-- 验证码 -->
            <input name="vcode" type="text" maxlength="6" placeholder="验证码：">
            <div class="onlogin">注册/登陆</div>
            <!-- <div class="butMy" style="width: 1000px;height: 1000px;background: red;z-index: 130;"></div> -->
            <div class="xian"></div>
            <p>
                1. 如果你注册了那么将直接登陆。<br>
                2. 如果你没有注册那么将进行注册然后在登陆。<br>
                3. 反正就这一种登陆方式。<br>
                4. 真正后面需要用户名了直接可以将手机为用户名。<br>
                5. 密码后期可以加。<br>
            </p>
        </div>
    </div>
    <script>
        // 获取验证码
        $('.obtain_code').click(function(e){
            // 获取手机号
            var phone = $('input[name = "phone"]').val()
            // 判断是否是手机号
            if(phone.length == 11){
                // 发送请求
                $.ajax({
                    type:'POST',
                    url:'/SendSms',
                    data:{
                        // 传递手机号
                        phone:phone
                    },
                    // 返回结果
                    success:function(res){
                        // msg_id
                        console.log(res)
                        $('input[name = "msg_id"]').val(res.msg_id)
                        Tishi("获取验证码成功！")
                    }
                })
            }else{
                Tishi("输入的是手机号吗？")
            }
        })
        //点击注册
        $('.onlogin').click(function(e){
            // 获取手机号
            var phone = $('input[name = "phone"]').val()
            //获取验证码vcode
            var vcode = $('input[name = "vcode"]').val()
            //获取验证码的id 
            var vcodeID = $('input[name = "msg_id"]').val()
            if(vcode.length == 6 && phone.length == 11 && vcodeID !== '' ){
                // 验证验证码并注册
                $.ajax({
                    type:'POST',
                    url:'/addUser',
                    data:{
                        phone:phone,
                        vcode:vcode,
                        vcodeID:vcodeID,
                    },success:function(res){
                        console.log(res)
                        if(res.isok == true){
                            Tishi("登陆成功")
                            $('.ul1').hide()       
                            $('.log11').show() 
                            $('.log11').text(res.uphone)
                            $('.land').hide()
                            $('.Mask').hide()
                        }else{
                            Tishi("验证码错误")
                        }
                    }
                })
            }else{
                Tishi("验证码不正确！")
            }
        })
        // 提示弹窗
        function Tishi(value) {
            alert(value).then(() => {
                console.log('已确认')
            })
        }
        $('.onle').click(function(e){
            $('.land').hide()
            $('.Mask').hide()
        })
        $('.ul1').click(function(e){
            $('.land').show()
            $('.Mask').show() 
        })
    </script>
</body>
</html>